<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="demo">点击获取当前坐标</div>
    <div id="btn">获取</div>
    <script>
        // 手机 自带电话卡、卫星定位，lbs 硬件加持
        // 陀螺仪 重力感应
        // web 应用 js -> window.localStorage
        const demo = document.getElementById('demo')
        document.getElementById('btn').addEventListener('click',function() {
            // 不支持lbs，或关掉lbs
            if(navigator.geolocation) { // 浏览器嗅探
                console.log('----');
                navigator.geolocation.getCurrentPosition(showPosition)
            } else {
                demo.innerHTML='该浏览器不支持获取地理位置'
            }
        },false) // true 事件冒泡，false 捕获机制从外到内
        function showPosition(position) {
            // console.log(position)
            demo.innerHTML=`维度：${position.coords.latitude}<br>
                经度：${position.coords.longitude}`
        }
    </script>
</body>
</html>